<template>
  <el-dialog v-model="dialogVisible"
             title="打印发货单"
             :align-center="true"
             draggable
             @close="clearData">
    <div class="my-multi-table">
      <div class="button_group">
        <el-button type="primary"
                   @click="printSendTable">打印运输交接单</el-button>
      </div>
      <div class="print"
           ref="printRef">
        <div style="margin: 10px auto 0px;height: 330px;"
             v-for="(item,index) in orderInfoList"
             :key="index">
   
          <h3 style="text-align: center; margin-top: 20px; margin-bottom: 10px;padding-top:45px">
            太原市晋合包装有限公司发货单
          </h3>
          <div class="name-time">
            <span style="margin-bottom: 10px">
              客户名称：{{ item.购买方名称 }}
            </span>
            <span style="text-align: right; margin-bottom: 10px">
              发货日期：{{ item.time }}
            </span>
          </div>

          <table style="width: 100%;"
                 class="table table-striped"
                 align="center"
                 valign="center">
            <tr>
              <th>货品名称</th>
              <th>单位</th>
              <th>数量</th>
              <th>单价</th>
              <th>总金额</th>
            </tr>
            <tr>
              <td>{{ item.货物或应税劳务名称 }}</td>
              <td>{{ item.单位 }}</td>
              <td>{{ Number(item.orderNum).toFixed(2) }}</td>
              <td>{{ Number(item.单价).toFixed(2) }}</td>
              <td>
                {{
               
                    Number(item.jine).toFixed(2)
                  
                }}
              </td>
            </tr>
            <tr>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <!-- 其他货品行 -->
          </table>
          <br />
          <div class="car-info">
            <div class="car-info-item">司机：{{ item.name }}</div>
            <div class="car-info-item">车牌号：{{ item.plateNumber }}</div>
            <div class="car-info-item">联系方式：{{ item.phone }}</div>
          </div>
          <br />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { Print, printFiles } from "@/utils/print";

const handleAfterPrint = () => {
  console.log("打印完成1111");
};
onMounted(() => {
  window.addEventListener("afterprint", handleAfterPrint);
});

let dialogVisible = ref(false);
let orderInfoList = ref<Array<any>>([]);
let init = (row: any) => {
  dialogVisible.value = true;
  orderInfoList.value = row;
  console.log(orderInfoList.value, row);
};
defineExpose({ init });

let printRef = ref();

const printSendTable = () => {
  Print(printRef.value);
  // printFiles([printRef.value,printRef.value]);
};
const clearData = () => {
  orderInfoList.value = [];
};
</script>

<style scoped>
td {
  text-align: center;
}
table tr td,
table tr th {
  border: 1px solid;
}
/* 打印样式 */
@media print {
  body {
    width: 800px; /* 设置发货单布局的宽度 */
    margin: 0 auto; /* 居中显示 */
  }
  /* 其他打印样式设置 */
}
@page {
  margin: 0 3cm;
}
.car-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.car-info-item {
  margin-right: 30px;
}
.name-time {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
